<template>
    <div class="album-push-check">
        <nav-header></nav-header>
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width" v-if="user_level === 0">
                        <el-select v-model="platform_id" filterable placeholder="来源学校/教育局">
                            <el-option v-for="item in platformList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="open-width" style="width: 100px;">
                        <el-select v-model="status" filterable placeholder="状态">
                            <el-option label="全部状态" :value="-1"></el-option>
                            <el-option label="未审核" :value="1"></el-option>
                            <el-option label="已通过" :value="2"></el-option>
                            <el-option label="已拒绝" :value="3"></el-option>
                        </el-select>
                    </div>
                    <div class="open-width">
                        <el-input placeholder="专辑名称" v-model="keyword" @keyup.enter.native="search"></el-input>
                    </div>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </div>
            </div>
            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table :data="listData" border max-height="541">
                    <el-table-column type="index" label="序号" align="center" width="50" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="source_name" label="来源" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="res_name" label="专辑名称" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="category" label="专辑分类" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="teacher_name" label="创建人" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="res_upload_time" label="上传时间" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="status_name" label="审核状态" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column fixed="right" prop="handle" label="操作" align="center" width="250">
                        <template slot-scope="scope">
                            <!-- <el-button @click="videoView(scope.row)" type="text">预览</el-button> -->
                            <el-button @click="viewResource(scope.row)" type="text">预览</el-button>
                            <el-button v-if="scope.row.status === 1" type="text" @click="passTrigger(scope.row)">批准
                            </el-button>
                            <el-button v-if="scope.row.status === 1" type="text" @click="rejectTrigger(scope.row)">拒绝
                            </el-button>
                            <el-button v-if="scope.row.status === 3" type="text" @click="checkReject(scope.row)">拒绝理由
                            </el-button>
                            <el-button v-if="scope.row.status !== 1" type="text" class="delete-button"
                                @click="delTrigger(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="table-pagination" v-show="total_number > 10">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper"
                        :total="total_number">
                    </el-pagination>
                </div>
            </div>
        </div>
        <transition name="el-fade-in-linear">
            <div class="masking" :class="{ activeLive: isActive }">
                <div class="maskingBox" v-loading="viewLoading.status" :element-loading-text="viewLoading.txt">
                    <div class="masking_h">
                        <span>视频预览</span>
                        <i class="el-icon-close" @click="viewClose"></i>
                    </div>
                    <div class="masking_c">
                        <!-- <videoAlertView  v-if="showVideoPlayer" :playParam.sync="playParam" >
                            </videoAlertView> -->
                        <dplayerA v-if="showVideoPlayer" :playParam.sync="playParam"></dplayerA>

                    </div>
                </div>
            </div>
        </transition>
        <transition name="el-fade-in-linear" lock-scroll="false">
            <div class="masking" :class="{ activeLive: isPDFActive }">
                <div class="maskingBox">
                    <div class="masking_h">
                        <span>文档预览</span>
                        <i class="el-icon-close" @click="viewPDFClose"></i>
                    </div>
                    <div class="masking-document">
                        <div class="pdf-View">
                            <iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </transition>

        <image-viewer v-if="imagePreview.showViewer" :initial-index="imageIndex" :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>

        <el-dialog title="音频预览" :visible.sync="voiceVisible" width="auto" style="min-width:550px;" top="0"
            custom-class="imgVisible" :close-on-click-modal="false" :before-close="closeAudio">
            <div class="imgViewx">
                <audio id="voicepoauy" controls="controls" :src="voiceViewUrl" controlsList="nodownload" autoplay>
                    Your browser does not support the audio tag.
                </audio>
            </div>
        </el-dialog>

        <!-- bengin -->
        <el-dialog title="拒绝理由" :visible.sync="rejectDescFlag" :close-on-click-modal="false"
            :close-on-press-escape="false" width="40%">
            <div v-text="rejectDesc"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectDescFlag = false">取 消</el-button>
                <el-button type="primary" @click="rejectDescFlag = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝理由end -->

        <!-- 拒绝bengin -->
        <el-dialog title="拒绝" :visible.sync="rejectWin" :close-on-click-modal="false" :close-on-press-escape="false"
            width="40%">
            <div class="textarea-box">
                <el-form :model="rejectForm" ref="rejectForm" label-width="80px" class="demo-ruleForm">
                    <el-form-item label="拒绝理由" prop="txt"
                        :rules="[{ required: true, message: '请填写拒绝理由', validator: checkValue }]">
                        <el-input type="textarea" placeholder="在此填写拒绝理由..." v-model="rejectForm.txt" :maxlength="100"
                            required></el-input>
                    </el-form-item>
                </el-form>
                <p class="str-num"><span v-text="rejectForm.txt.length"></span>/<span class="str-max">100</span></p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rejectWinHide">取 消</el-button>
                <el-button type="primary" @click="reject">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 拒绝end -->
    </div>
</template>
<script>
// import videoAlertView from '../../public/videoAlertView'
import dplayerA from "@/components/public/dplayerA.vue";

export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
            user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')),
            platform_id: "",
            keyword: "",
            platformList: [],
            loading: {
                status: false,
                txt: "获取数据..."
            },
            total_number: 0,
            listData: [],
            listParam: {
                type: 3,
                platform_id: 0,
                keyword: "",
                status: "",
                page_index: 1,
                page_size: 10
            },
            status: -1,
            rejectWin: false /*拒绝弹窗 */,
            rejectForm: {
                txt: "" /*拒绝理由填写 */
            },
            rejectObj: null /*拒绝对象 */,
            showVideoPlayer: false,
            playParam: { play_url: "", type: 'application/x-mpegURL' },
            rejectDescFlag: false,
            rejectDesc: "",
            isActive: true,
            isPDFActive: true,
            viwPdfParam: {
                src: '',
                loadedRatio: 0,
                page: 1,
                numPages: 0,
                rotate: 0,
            },
            imgVisible: false,
            imgViewUrl: '',
            voiceVisible: false,
            voiceViewUrl: '',
            viewLoading: {
                status: false,
                txt: '加载数据...'
            },
            showVideoPlayer: false,
            playParam: { play_url: '', },
        };
    },
    created() {
        this.getList();
        if (Object.is(this.user_level, 0)) {
            this.get_canseeposition();
        }
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
        /**
         * 关闭音频播放
         */
        closeAudio() {
            this.voiceVisible = false;
            document.getElementById("voicepoauy").pause();
        },
        checkValue(rule, value, callback) {
            if (!checkSpace(value)) {
                callback(new Error("请输入有效值"));
            } else {
                callback();
            }
        },
        get_canseeposition() {
            const success = res => {
                this.platformList = res.data.data;
            };
            this.$ajax.get("api/level/get_canseeposition_school", {
                params: {},
                func: { success: success }
            });
        },
        getList() {
            this.loading.status = true;
            let params = this.listParam;
            const success = res => {
                this.loading.status = false;
                this.listData = res.data.data;
                this.total_number = res.data.data_sum;
            };
            this.$ajax.get("api/level/push_receive_list", {
                params: params,
                func: { success: success }
            });
        },
        search() {
            this.listParam.status = this.status;
            this.listParam.platform_id = this.platform_id;
            this.listParam.keyword = this.keyword;
            this.listParam.page_index = 1;
            this.getList();
        },
        reset() {
            this.platform_id = "";
            this.keyword = "";
            this.status = -1;
            this.listParam = {
                type: 3,
                platform_id: 0,
                keyword: "",
                status: "",
                page_index: 1,
                page_size: 10
            };
            this.getList();
        },
        handleSizeChange(size) {
            this.listParam.page_size = size;
            this.getList();
        },
        handleCurrentChange(page) {
            this.listParam.page_index = page;
            this.getList();
        },
        pass(id) {
            /*批准*/
            let params = {
                id: id
            };
            const success = res => {
                this.$message.success(res.msg);
                this.getList();
            };
            this.$ajax.post("api/level/approve_pushed_receive", params, {
                func: { success: success }
            });
        },
        passTrigger(data) {
            /*批准提示 */
            let tipsTxt = `确定批准${data.res_name}通过审核吗？`;
            this.$confirm(tipsTxt, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.pass(data.id);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消批准"
                    });
                });
        },
        rejectTrigger(data) {
            /*拒绝弹窗 */
            this.rejectWin = true;
            this.rejectObj = data;
        },
        rejectWinHide() {
            /*隐藏拒绝弹窗 */
            this.rejectWin = false;
            this.rejectObj = null;
            this.rejectForm.txt = "";
        },
        reject() {
            /*拒绝 */
            let params = {
                id: this.rejectObj.id,
                comment: this.rejectForm.txt
            };
            const success = res => {
                this.$message.success(res.msg);
                this.rejectWinHide();
                this.getList();
            };
            this.$refs[`rejectForm`].validate(valid => {
                if (valid) {
                    this.$ajax.put("api/level/refuse_pushed_receive", params, {
                        func: { success: success }
                    });
                } else {
                    return;
                }
            });
        },
        del(id) {
            let params = {
                id: id,
                type: 1
            };
            const success = res => {
                this.$message.success(res.msg);

                if (this.listData.length - 1 === 0) {
                    if (this.listParam.page_index > 1) {
                        this.listParam.page_index--;
                    } else {
                        this.listParam.page_index = 1;
                    }
                }

                this.getList();
            };
            this.$ajax.delete("api/level/delete_pushed_receive", {
                params: params,
                func: { success: success }
            });
        },
        delTrigger(data) {
            /*删除提示 */
            let tipsTxt = `确认删除${data.res_name}吗？`;
            this.$confirm(tipsTxt, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.del(data.id);
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        },
        pdfPageChange(val) {
            this.viwPdfParam.page = val;
        },
        error: function (err) {
            //this.$message.error('读取文件失败');
        },

        //资源预览转发
        viewResource(obj) {
            let jsonObj = JSON.parse(obj.data);
            this.viewLoading.status = true;

            //视频预览
            if (parseInt(jsonObj.file_type) === 6) {
                this.isActive = false
            }
            //图片预览
            else if (parseInt(jsonObj.file_type) === 3) {
                this.imgVisible = true;
            }
            //文档预览
            else if (parseInt(jsonObj.file_type) === 1) {
                this.isPDFActive = false
            }
            //音频预览
            else if (parseInt(jsonObj.file_type) === 5) {
                this.voiceVisible = true;
            } else {
                this.$message.warning("不支持预览的资源类型")
                return false;
            }
            let success = (data => {
                var result = data.data;
                //视频预览
                if (parseInt(result.file_type) === 6) {
                    this.videoView(result.path);
                }
                //图片预览
                else if (parseInt(result.file_type) === 3) {
                    this.imgView(result.path);
                }
                //文档预览
                else if (parseInt(result.file_type) === 1) {
                    this.pdfView(result.path);
                }
                //音频预览
                else if (parseInt(result.file_type) === 5) {
                    this.voiceView(result.path)
                    //this.$message.warning("不支持预览的资源类型")
                } else {
                    this.$message.warning("不支持预览的资源类型")
                }
            })
            let fail = (data => {
                this.viewLoading.status = false;
                this.$message.error(data.msg)
            })
            this.$ajax.get('api/resource/view_info', { params: { id: jsonObj.id, is_video: jsonObj.is_video }, func: { success: success, fail: fail } })
        },
        voiceView(url) {
            this.voiceViewUrl = url;
            document.getElementById("voicepoauy").load();
        },
        imgView(url) {
            this.imgViewUrl = url;
            this.imagePreview.showViewer = true;
            this.imagePreview.previewSrcList = [url];
        },
        closeViewer() {
            this.imagePreview.showViewer = false;
        },
        //pdf预览
        pdfView(url) {
            this.viwPdfParam.src = (url)
            // this.viwPdfParam.src =  pdf.createLoadingTask(url)
        },
        viewPDFClose() {
            this.isPDFActive = true
        },
        //关闭视频预览
        viewClose() {
            this.showVideoPlayer = false;
            this.isActive = true

        },
        //视频预览
        videoView(url) {
            this.showVideoPlayer = true;
            this.playParam.play_url = url;
        },
        checkReject(data) {
            this.rejectDescFlag = true;
            this.rejectDesc = data.comment;
        }
    },
    components: {
        // videoAlertView,
        dplayerA,
        // pdf
    }
};
</script>
<style lang="scss">
.album-push-check {
    .textarea-box {
        position: relative;

        .el-textarea__inner {
            min-height: 120px !important;
            resize: none;
        }

        .str-num {
            position: absolute;
            padding: 0;
            margin: 0;
            left: 0;
            bottom: 5px;
            right: 15px;
            text-align: right;

            .str-max {
                color: #ddd;
            }
        }
    }

    .el-table__body-wrapper table tbody {
        td:nth-child(8) {
            padding: 0;
        }
    }

    .masking {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        // height: 100%;
        transition: .5s;
        background: rgba(0, 0, 0, .3);
        z-index: 4;

        .maskingBox {
            position: absolute;
            top: 15%;
            left: 50%;
            width: 800px;
            margin-left: -400px;
            background: #fff;
        }

        .masking_h {
            padding: 10px 15px;
            background: #348EFC;
            text-align: center;
            text-align-last: justify;

            >span,
            >i {
                font-size: 16px;
                text-align-last: initial;
                display: inline-block;
                vertical-align: middle;
                color: #fff;
            }

            >i {
                cursor: pointer;
            }
        }

    }

    // .masking_c {
    //     .el-pagination {
    //         padding-bottom: 20px;
    //     }
    // }.
    .masking_c {
        padding: 15px;
        height: 450px;
    }

    .activeLive {
        opacity: 0;
        visibility: hidden;
    }

    .imgVisible {
        display: inline-block;
        vertical-align: middle;
        background: none;
        text-align: left;
        min-width: 550px;
        min-height: 550px;
        background: rgba(109, 116, 125, 0.78);
        margin: 0;

        .el-dialog__header {
            // display: none;
        }

        .el-dialog__body {
            text-align: center;
            padding: 0;

            img {
                max-width: 100%;
            }
        }
    }

    .el-dialog__wrapper {
        text-align: center;
    }
}
</style>

